<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			
			li {
				width: 48px;
				height: 48px;
				overflow: hidden;
				border: 5px solid black;
				margin: 10px;
			}
			
			li img {
				width: 100%;
			}
			
		</style>
	</head>

	<body>
		<ul>
			<li><img src="img/bird0_0.png" /></li>	
			<li><img src="img/pipe_up.png" /></li>
		</ul>
		
		<!--
			拖拽
				1. 获取图片的位置
				2. 把布局变为定位
				3. 拖拽函数
			碰撞
		-->
		<script type="text/javascript">
			//			var ali = document.querySelector("li");
			//				ali.addEventListener("mousemove",function(e){
			//					var x = e.pageX;
			//					var y = e.pageY;
			//					ali.style.left = x + -20 + "px";
			//					ali.style.top = y + -20 + "px";
			//				})
			var ali = document.querySelectorAll("li");
			var arr = [];
			for (var i = 0; i < ali.length; i++) {
				arr.push([ali[i].offsetLeft, ali[i].offsetTop]);
			}
			for (var i = 0; i < ali.length; i++) {
				ali[i].style.position = "absolute";
				ali[i].style.left = arr[i][0] + "px";
				ali[i].style.top = arr[i][1] + "px";
			}
			for (var i = 0; i < ali.length; i++) {
				drag(ali[i]);
			}
			
			console.log(arr)

			function drag(obj) { // 拖拽
				obj.onmousedown = function(e) {
					e.preventDefault();
					var x = e.clientX;
					var y = e.clientY;
					var _left = obj.offsetLeft;
					var _top = obj.offsetTop;
					document.onmousemove = function(e) {
						obj.style.left = e.clientX - x + _left + "px";
						obj.style.top = e.clientY - y + _top + "px";
						for(var j = 0; j < ali.ength; j++) {
							bump(obj, ali[j]);
						}
					}
					document.onmouseup = function() {
						document.onmousemove = null;
					}
				}

			}

			function bump(obj1, obj2) { // 碰撞检测
				console.log(123);
				var l1 = obj1.offsetLeft,
					r1 = obj1.offsetLeft + obj1.offsetWidth,
					t1 = obj1.offsetTop,
					b1 = obj1.offsetTop + obj1.offsetHeight;
					console.log(t1);
					console.log(b1);
				var l2 = obj2.offsetLeft,
					r2 = obj2.offsetLeft + obj2.offsetWidth,
					t2 = obj2.offsetTop,
					b2 = obj2.offsetTop + obj2.offsetHeight;

//				if(l2 > r1 || t2 > b1 || l1 > r2 || b2 < t1) {
//					console.log("碰不到我");
//				} else {
//					console.log("碰我干嘛");
//				}

				
			}
			
		</script>
	</body>

</html>